<script setup lang="jsx">
  import NcForm from './index.vue';
  import { NstdMessage } from 'nstd-components-pc-v3';
  import { config } from './config.jsx';
  const page = ref();
  const formColumns = computed(() => {
    return config({
      handleClick
    });
  });
  const formData = reactive({});
  const form = ref();
  console.log(form, 'form');
  // eslint-disable-next-line no-unused-vars
  function handleClick(item) {
    console.log(item, 'item');
  }
  function handleSubmit() {
    form.value.formRef.validate((valid) => {
      if (!valid) {
        return NstdMessage({
          type: 'error',
          message: '校验失败'
        });
      }
    });
    console.log(formData, 'formData');
  }
  function handleReset() {
    console.log(form.value.formRef, 'form');
    form.value.formRef.resetFields();
  }
  const formRules = {
    name: [
      {
        required: true
      }
    ]
  };
</script>

<template>
  <div ref="page">
    <NcForm label-width="120" ref="form" :form-rules="formRules" :form-columns="formColumns" :form-data="formData" />
    <NstdButton @click="handleSubmit" type="primary">提交</NstdButton>
    <NstdButton @click="handleReset">重置</NstdButton>
  </div>
</template>

<style scoped lang="scss"></style>
